<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>入驻</title>
<link rel="icon" href="__IMG__/favicon.ico" />
<link rel="stylesheet" href="__PLUGIN__/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="__PLUGIN__/node-waves/waves.css" />
<link rel="stylesheet" href="__PLUGIN__/animate-css/animate.css" />
<link rel="stylesheet" href="__PLUGIN__/dropzone/dropzone.css" />
<link rel="stylesheet" href="__CSS__/font.css" />
<link rel="stylesheet" href="__CSS__/style.css" />
</head>
<body class="signup-page" style="max-width:1000px">
    <div class="page-loader-wrapper">
        <div class="loader">
            <div class="preloader">
                <div class="spinner-layer pl-red">
                    <div class="circle-clipper left">
                        <div class="circle"></div>
                    </div>
                    <div class="circle-clipper right">
                        <div class="circle"></div>
                    </div>
                </div>
            </div>
            <p>加载中...</p>
        </div>
    </div>
    
    <div class="signup-box">
        <div class="card">
            <div class="header"><h2>企业入驻</h2></div>
            <div class="body">
                <form id="wizard" method="POST">
                    <h3>填写基本信息</h3>
                    <section>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="text" class="form-control" name="full_name" required>
                                <label class="form-label">企业全名*</label>
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="text" class="form-control" name="shortname" id="password" required>
                                <label class="form-label">企业简称*</label>
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <textarea name="address" cols="30" rows="3" class="form-control no-resize" required></textarea>
                                <label class="form-label">企业地址*</label>
                            </div>
                        </div>
                    </section>
                    <h3>完善资质信息</h3>
                    <section>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="text" name="credit_code" class="form-control" required>
                                <label class="form-label">统一社会信用代码*</label>
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="text" name="registration_number" class="form-control" required>
                                <label class="form-label">工商执照注册号*</label>
                            </div>
                        </div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="text" name="organization_code" class="form-control" required>
                                <label class="form-label">组织机构代码</label>
                            </div>
                        </div>
                    </section>
                    <h3>提交资质文件</h3>
                    <section>
                        <div class="card">
                            <div class="body">
                                <form action="/" id="frmFileUpload" class="dropzone" method="post" enctype="multipart/form-data">
                                    <div class="dz-message">
                                        <div class="drag-icon-cph">
                                            <i class="material-icons">touch_app</i>
                                        </div>
                                        <h3>Drop files here or click to upload.</h3>
                                        <em>(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</em>
                                    </div>
                                    <div class="fallback"><input name="file" type="file" multiple /></div>
                                </form>
                            </div>
                        </div>
                        <input id="acceptTerms-2" name="acceptTerms" type="checkbox" required>
                        <label for="acceptTerms-2">我同意入驻协议</label>
                    </section>
                </form>
            </div>
        </div>
    </section>
    <script src="__PLUGIN__/jquery/jquery.min.js"></script>
    <script src="__PLUGIN__/bootstrap/js/bootstrap.js"></script>
    <script src="__PLUGIN__/node-waves/waves.js"></script>
    <script src="__PLUGIN__/dropzone/dropzone.js"></script>
    <script src="__PLUGIN__/jquery-steps/jquery.steps.js"></script>
    <script src="__PLUGIN__/jquery-validation/jquery.validate.js"></script>
    <script src="__PLUGIN__/jquery-slimscroll/jquery.slimscroll.js"></script>
    <script src="__PLUGIN__/jquery-validation/localization/messages_zh.js"></script>
    <script src="__JS__/admin.js"></script>
    <script>
    $(function() {
        Dropzone.options.frmFileUpload = {paramName: "file", maxFilesize: 4};
        var form = $('#wizard').show();
        form.steps({
            headerTag: 'h3',
            bodyTag: 'section',
            transitionEffect: 'slideLeft',
            onInit: function(event, currentIndex) {
                $.AdminBSB.input.activate();
                var $tab = $(event.currentTarget).find('ul[role="tablist"] li');
                var tabCount = $tab.length;
                $tab.css('width', (100 / tabCount) + '%');
                setButtonWavesEffect(event);
            },
            onStepChanging: function(event, currentIndex, newIndex) {
                if (currentIndex > newIndex) { return true; }
                if (currentIndex < newIndex) {
                    form.find('.body:eq(' + newIndex + ') label.error').remove();
                    form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
                }
                form.validate().settings.ignore = ':disabled,:hidden';
                return form.valid();
            },
            onStepChanged: function(event, currentIndex, priorIndex) {
                setButtonWavesEffect(event);
            },
            onFinishing: function(event, currentIndex) {
                form.validate().settings.ignore = ':disabled';
                return form.valid();
            },
            onFinished: function(event, currentIndex) {
                swal("Good job!", "Submitted!", "success");
            }
        });
        form.validate({
            highlight: function(input) {
                $(input).parents('.form-line').addClass('error');
            },
            unhighlight: function(input) {
                $(input).parents('.form-line').removeClass('error');
            },
            errorPlacement: function(error, element) {
                $(element).parents('.form-group').append(error);
            },
            rules: {
                'confirm': {
                    equalTo: '#password'
                }
            }
        });
    });
    function setButtonWavesEffect(event) {
        $(event.currentTarget).find('[role="menu"] li a').removeClass('waves-effect');
        $(event.currentTarget).find('[role="menu"] li:not(.disabled) a').addClass('waves-effect');
    }
    </script>
</body>
</html>